<template>
  <div class="pages integral-discount" id="app">
    <div class="pageLevel">
      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form label-width="100px" class="demo-ruleForm">
          <el-form-item label="" label-width="15px">
            <el-input class="input" :disabled="dis" clearable v-model="selectdata.keyword" size="small" placeholder="请输入积分规则查询"></el-input>
          </el-form-item>
          <el-form-item label="" label-width="15px">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="searchSelect" :disabled="dis" class="Button">查询</el-button>
          </el-form-item>
          <!-- <el-form-item label class="serchAdd" label-width="25px">
            <el-button type="primary" :disabled="dis" @click="handleClose('add')" size="mini">新增</el-button>
          </el-form-item>
          <el-form-item label class="serchAdd" label-width="25px">
            <el-button type="primary" :disabled="dis" @click="handleFenpei('选择门店')" size="mini">分配</el-button>
          </el-form-item> -->
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <el-table ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange" stripe style="width: 100%">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="index" label="序号" width="55"></el-table-column>
          <el-table-column prop="ruleName" label="会员优惠规则" align="center"> </el-table-column>
          <el-table-column prop="ruleDesc" align="center" label="规则说明"> </el-table-column>
          <el-table-column align="center" label="操作" width="280">
            <template slot-scope="scope">
              <!-- <el-button size="small" @click="handleClose('edit')" type="text" class="addDetail">编辑</el-button> -->
              <el-button size="small" @click="configure(scope.row.id)" type="text" class="addDetail">配置规则</el-button>
              <!-- <el-button size="small" @click="handleFenpei('已分配门店',scope.row.id)" type="text" class="addDetail">查看已分配</el-button> -->
              <!-- <el-button size="small" @click="deleteIntetralRule(scope.row.id)" type="text" class="addDetail">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <!-- 页码 -->
        <!-- <div class="pageblock">
          <el-button :disabled="dis" size="small" type="primary" class="topage" @click="toPage">确定</el-button>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20,30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalItems">
          </el-pagination>
        </div> -->
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog :title='dialogtitle' :visible.sync="dialogVisibleAdd" width="30%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="积分规则：" prop="name">
          <el-input v-model="ruleForm.name" maxlength="15"></el-input>
        </el-form-item>
        <el-form-item label="规则说明：" prop="desc">
          <el-input type="textarea" v-model="ruleForm.desc" maxlength="20"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleAdd = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="Elastic" :visible.sync="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false">
      <!-- 操作框 -->
      <StoreBranch :dialogVisible.sync="dialogVisible" v-on:dialogVis='store' :integralMulti.sync="integralMulti" :unallocate.sync='unallocate'></StoreBranch>
    </el-dialog>
    <el-dialog title="配置规则" :visible.sync="dialogVisiblemix" :closeOnClickModal='false' :closeOnPressEscape='false' width="1000px">
      <el-form label-width="80px" :disabled="isOwnAuth=='0'">
        <el-tabs v-model="activeName2" type="card">
          <el-tab-pane label="新会员开卡" name="first">
            <div class="payment-box">
              <el-checkbox v-model="ruleForm.isNewMember" :true-label='1' :false-label='0'>消费赠送</el-checkbox>
              <el-input class="payment-input" maxlength="8" :disabled="ruleForm.isNewMember!=1" v-model="ruleForm.newMemberIntegralMultiple" placeholder="正整数" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"></el-input>
              <span> 倍积分</span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="会员生日营销" name="fir">
            <div class="payment-box">
              <el-checkbox v-model="ruleForm.isMemberBirthday" :true-label='1' :false-label='0'>消费赠送</el-checkbox>
              <el-input class="payment-input" maxlength="8" :disabled="ruleForm.isMemberBirthday!=1" v-model="ruleForm.memberBirthdayIntegralMultiple" placeholder="正整数" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"></el-input>
              <span> 倍积分</span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="会员日" name="firs">
            <div class="payment-box">
              <el-radio v-model="ruleForm.memberDayType" :label="null" class="payment-rightmin">无会员日</el-radio>
              <el-radio v-model="ruleForm.memberDayType" :label="0">会员日为每年</el-radio>
              <el-date-picker class="payment-right" :disabled="ruleForm.memberDayType!=0" value-format="MM-dd" format="MM 月 dd 日" v-model="ruleForm.Start" type="daterange" @change="wwd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
              <span>消费获</span>
              <el-input class="payment-input" maxlength="8" :disabled="ruleForm.memberDayType!=0" v-model="ruleForm.memberDayYearIntegralMultiple" placeholder="正整数" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"></el-input>
              <span> 倍积分</span>
            </div>
            <div class="payment-box">
              <el-radio v-model="ruleForm.memberDayType" :label="1">会员日为每月</el-radio>
              <el-select class="payment-input " :disabled="ruleForm.memberDayType!=1" v-model="ruleForm.memberDayMonth" placeholder="请选择" style='width: 80%'>
                <el-option v-for='item in Dates' :key="item" :label="item" :value="item"></el-option>
              </el-select>
              <span>消费获</span>
              <el-input class="payment-input" maxlength="8" :disabled="ruleForm.memberDayType!=1" v-model="ruleForm.memberDayMonthIntegralMultiple" placeholder="正整数" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"></el-input>
              <span> 倍积分</span>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <div slot="footer" class="deploy-footer">
        <el-button style="margin-right:20px;" @click="dialogVisiblemix=false">取 消</el-button>
        <el-button type="primary" v-if="isOwnAuth!='0'" @click="configSave">保 存</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { mapState } from "vuex";
import {
  deleteGoodsLabel,
  toLowerShop,
  selectBaseShopPageList,
  deleteIntegralDiscountRule,
  getIntetralRuleInfo,
  saveOrUpdateIntegralDiscountRule,
  ListIntetralRules,
  getIntetralDiscountRuleInfo
} from "@/api";
import util from "@/util";
import StoreBranch from "@/components/StoreBranchto";
export default {
  computed: mapState(["merchantId", "sub", "power", "isOwnAuth"]),
  components: {
    StoreBranch: StoreBranch
  },
  data() {
    return {
      Elastic: "",
      Dates: [
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        10,
        11,
        12,
        13,
        14,
        15,
        16,
        17,
        18,
        19,
        20,
        21,
        22,
        23,
        24,
        25,
        26,
        27,
        28
      ],
      ruleForm: {
        name: "",
        desc: "",
        memberDayMonthIntegralMultiple: "",
        memberDayYearIntegralMultiple: "",
        memberDayMonth: "",
        Start: [],
        memberDayType: null,
        newMemberIntegralMultiple: "",
        memberBirthdayIntegralMultiple: "",
        isMemberBirthday: 0,
        isNewMember: 0
      },
      StartTime: [" ", " "],
      radio: "",
      activeName2: "first",
      input: "",
      value8: "",
      deployId: "",
      unallocate: false,

      rules: {
        name: [
          { required: true, message: "请输入积分规则", trigger: "blur" },
          { max: 15, message: "最多15个字符", trigger: "blur" }
        ]
      },
      dialogtitle: "新增",
      dialogVisibleAdd: false,
      dialogVisible: false,
      dialogVisiblemix: false,
      dis: false,
      selectdata: {
        keyword: ""
      },
      selectdatas: {
        keyword: ""
      },
      supplierType: [],
      tableData: [],
      shopList: [],
      integralMulti: [],
      deployId: "",
      // 分页开始
      total: 0,
      pageSize: 20,
      totalItems: 0,
      currentPage: 1,
      // 分页开始
      pageSizes: 20,
      totalItemss: 0,
      currentPages: 1,
      ids: ""
    };
  },
  created() {
    // 获取品牌分类名称列表
    this.order();
  },
  mounted() {
    // 获取表格数据
    this.tableget(20, 1);
    this.tableget_org(20, 1);
  },
  methods: {
    wwd() {
      // console.log(this.ruleForm.Start);
    },
    configSave() {
      if (this.ruleForm.memberDayType == 0) {
        console.log(this.StartTime);
        this.StartTime[0] = this.ruleForm.Start[0].split("-");
        this.StartTime[1] = this.ruleForm.Start[1].split("-");
        if (this.StartTime[0][0] == "null") {
          this.$message({
            showClose: true,
            message: "请将会员日为每年的信息填写完整！",
            type: "error"
          });
          return false;
        }
      }
      // console.log(this.ruleForm.Start);
      this.saveOradd();
    },
    store(data) {
      this.dialogVisible = data;
    },
    father(data) {
      this.dialogVisiblemix = data;
    },
    integralSee() {},
    configure(id) {
      this.deployId = id;
      let data = {
        integralDiscountRuleId: id
      };
      getIntetralDiscountRuleInfo(data).then(res => {
        this.dialogVisiblemix = true;
        this.ruleForm = res.data;
        let time =
          res.data.memberDayYearStartMonth +
          "-" +
          res.data.memberDayYearStartDay;
        let time1 =
          res.data.memberDayYearEndMonth + "-" + res.data.memberDayYearEndDay;
        this.$delete(this.ruleForm, "Start");
        this.$set(this.ruleForm, "Start", [time, time1]);
        // console.log(this.ruleForm.Start);
        this.ruleForm.isNewMember = res.data.isNewMember;
        this.ruleForm.isMemberBirthday = res.data.isMemberBirthday;
      });
    },
    //分配商户多选
    changeFun(val) {
      this.isshop = true;
      this.shopMulti = val;
    },
    //分配商户
    tableget_org(pageSize, pageNum) {
      let Data = {
        pageNum: pageNum,
        pageSize: pageSize,
        businessId: this.merchantId,
        status: 0,
        nameOrCode: this.selectdata.orgKey,
        type: "4"
      };
      selectBaseShopPageList(Data).then(res => {
        this.total = res.data.pageTotal;
        this.shopList = res.data.list;
        let aress = [];
      });
    },
    searchSelectOrg() {
      //门店查询
      this.tableget_org(this.pageSizes, 1);
    },
    // 多选
    handleFenpei(name, id) {
      this.Elastic = name;
      if (name == "选择门店") {
        if (this.integralMulti.length > 0) {
          this.unallocate = false;
          this.dialogVisible = true;
        } else {
          this.$message({
            showClose: true,
            message: "请先选择积分规则！",
            type: "error"
          });
        }
      } else {
        this.unallocate = true;
        this.dialogVisible = true;
      }
    },
    distribution() {
      var arr = [];
      var arrs = [];
      for (var i = 0; i < this.integralMulti.length; i++) {
        arr.push(this.integralMulti[i].id);
      }
      if (this.shopMulti === undefined) {
        this.$message({
          type: "info",
          message: "请选择商户"
        });
        return false;
      }
      for (var i = 0; i < this.shopMulti.length; i++) {
        arrs.push(this.shopMulti[i].id);
      }
      let data = {
        goodsIds: arrs.toString(),
        shopIds: arr.toString()
      };
      toLowerShop(data).then(res => {
        this.$message({
          type: "success",
          message: "分配成功!"
        });
        this.dialogVisible = false;
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.memberadd();
        } else {
          return false;
        }
      });
    },
    //配置权限
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    // 获取品牌分类名称列表
    order() {
      this.supplierType = [
        { id: 1, name: "总代理" },
        { id: 2, name: "省代理" }
      ];
    }, //获取表格数据
    tableget(pageSize, pageNum) {
      let data = {
        ruleName: this.selectdatas.keyword,
        pageSize: pageSize,
        pageNum: pageNum,
        type: "1",
        shopId: this.merchantId
      };
      ListIntetralRules(data).then(res => {
        if (res.code == "200") {
          // this.totalItems = res.data.pageTotal;
          this.tableData = res.data;
        }
      });
    },
    // 新增-添加表的一行
    handleClose(name, id) {
      if (name == "add") {
        this.memberId = "";
        this.dialogtitle = "新增";
      } else {
        this.dialogtitle = "编辑";
        this.memberId = id;
        this.memberSee();
      }
      this.dialogVisibleAdd = true;
    },
    memberSee() {
      let data = {
        id: this.memberId
      };
      getIntetralRuleInfo(data).then(res => {
        this.ruleForm.name = res.data.ruleName;
        this.ruleForm.desc = res.data.ruleDesc;
      });
    },
    memberadd() {
      let data = {
        id: this.memberId,
        ruleDesc: this.ruleForm.desc,
        ruleName: this.ruleForm.name,
        shopId: this.merchantId
      };
      saveOrUpdateIntegralDiscountRule(data).then(res => {});
    },
    saveOradd() {
      let data = {
        id: this.deployId,
        isNewMember: this.ruleForm.isNewMember,
        isMemberBirthday: this.ruleForm.isMemberBirthday,
        memberDayType: this.ruleForm.memberDayType,
        shopId: this.merchantId
      };
      if (this.ruleForm.memberDayType == 0) {
        console.log(this.ruleForm.memberDayYearIntegralMultiple);
        console.log(this.ruleForm.Start[0]);

        if (
          this.ruleForm.memberDayYearIntegralMultiple == null ||
          this.StartTime[0][0] == "null"
        ) {
          this.$message({
            showClose: true,
            message: "请将会员日为每年的信息填写完整！",
            type: "error"
          });
          return false;
        }
        data.memberDayYearStartMonth = this.StartTime[0][0];
        data.memberDayYearStartDay = this.StartTime[0][1];
        data.memberDayYearEndMonth = this.StartTime[1][0];
        data.memberDayYearEndDay = this.StartTime[1][1];
        data.memberDayYearIntegralMultiple = this.ruleForm.memberDayYearIntegralMultiple;
      } else if (this.ruleForm.memberDayType == 1) {
        if (
          this.ruleForm.memberDayMonth == null ||
          this.ruleForm.memberDayMonthIntegralMultiple == null
        ) {
          this.$message({
            showClose: true,
            message: "请将会员日为每月的信息填写完整！",
            type: "error"
          });
          return false;
        }
        data.memberDayMonth = this.ruleForm.memberDayMonth;
        data.memberDayMonthIntegralMultiple = this.ruleForm.memberDayMonthIntegralMultiple;
      }
      if (this.ruleForm.isNewMember == 1) {
        data.newMemberIntegralMultiple = this.ruleForm.newMemberIntegralMultiple;
      }
      if (this.ruleForm.isMemberBirthday == 1) {
        data.memberBirthdayIntegralMultiple = this.ruleForm.memberBirthdayIntegralMultiple;
      }
      saveOrUpdateIntegralDiscountRule(data).then(res => {
        this.dialogVisiblemix = false;
      });
    },
    //删除
    deleteIntetralRule(id) {
      this.$confirm("确定要删除该条会员优惠规则吗？?", "提示", {
        center: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnClickModal: false,
        closeOnPressEscape: false
      }).then(() => {
        let Data = {
          integralRuleId: id
        };
        deleteIntegralDiscountRule(Data).then(res => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        });
      });
    },
    // 积分规则多选
    handleSelectionChange(val) {
      this.integralMulti = val;
    },
    // 查询
    searchSelect() {
      this.selectdatas = this.selectdata;
      this.tableget(20, 1);
    },
    //修改
    handleEdit(i, id) {
      this.ids = id;
      this.dis = true;
      this.tableData[i].show = true;
    },
    //跳页
    toPage() {
      this.tableget(this.pageSize, this.currentPage);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.tableget(this.pageSize, 1);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.tableget(this.pageSize, this.currentPage);
    },
    //分配下级组织机构-----------分页
    toPages() {
      this.tableget_org(this.pageSizes, this.currentPages);
    },
    handleSizeChanges(val) {
      this.pageSizes = val;
      this.tableget_org(this.pageSizes, this.currentPages);
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChanges(val) {
      this.currentPages = val;
      this.tableget_org(this.pageSizes, this.currentPages);
    }
  }
};
</script>
<style >
.integral-discount .el-tabs__header {
  width: 320px;
  margin: 0 auto;
}
.integral-discount .payment-checkbox {
  width: 200px;
  float: left;
  margin-left: 10px;
}
.integral-discount .payment-checkbox .el-checkbox {
  display: block;
  line-height: 30px;
}
.consume-radio .el-radio {
  line-height: 40px;
}
</style>
<style scoped>
.showmore {
  display: block;
}
#app {
  text-align: left;
}
.payment-box {
  width: 840px;
  margin: 25px 0 15px 10px;
}
.payment-input {
  width: 150px !important;
  margin-right: 10px;
}
.payment-right {
  margin-right: 10px;
}
.payment-rightmin {
  margin-right: 700px;
  height: 50px;
}
.deploy-footer {
  width: 185px;
  margin: 25px auto;
}
</style>

